<template>
  <div class="particulars">
    <img src="../../assets/ico.png" alt="" />
    <h3>签约详情</h3>
    <el-divider border-style="double" />
    <h4>居民信息</h4>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="box1">
          <span class="xinmin">姓名</span>
          <span class="war">王安然</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box2">
          <span class="id">身份证号</span>
          <span>513721299711002299</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="sex">性别</span>
          <span>女</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="age">年龄</span>
          <span>26</span>
        </div>
      </el-col>
    </el-row>
    <div class="bttom">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="box">
            <span class="xinmin">联系电话</span>
            <span class="war">18864308600</span>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="box2">
            <span class="id">现居地 </span>
            <span> 怀柔区洛西县建设路青莲小区6-601</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box4">
            <span class="age">居民标签</span>
            <span>
              <el-button type="warning" plain>高血压</el-button>
              <el-button type="danger" plain>冠心病</el-button>
            </span>
          </div>
        </el-col>
      </el-row>
      <span class="family">家庭成员</span>
      <div class="member">
        <el-row :gutter="12">
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
        </el-row>
      </div>
      <el-divider border-style="double" />
    </div>
    <!--  -->
    <h4>签约信息</h4>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约编号</span>
          <span class="">20190009091</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">签约状态</span>
          <span>待审核</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="qy">签约机构</span>
          <span>洛西社区卫生服务站</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="qy">签约团队</span>
          <span> 李明明团队</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约医生</span>
          <span class="">老人服务包</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">服务包</span>
          <span>老人服务包</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="qy">签约周期</span>
          <span>1年</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box4">
          <span class="qy">费用</span>
          <span> ¥120</span>
        </div>
      </el-col>
    </el-row>
    <!--  --><el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约类型</span>
          <span class="">首次签约</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">申请时间 </span>
          <span>2020/10/09 </span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="qy">生效日期</span>
          <span>2020/10/09</span>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="double" />
    <el-row class="mb-4">
      <el-button type="primary" @click="handleClick">编辑签约信息</el-button>
      <el-button type="success" @click="open">审核通过</el-button>
      <!-- 驳回按钮 -->
      <el-button type="warning" @click="dialogFormVisible = true"
        >驳回</el-button
      >
      <!-- 驳回对话框 -->
      
      <el-dialog v-model="dialogFormVisible" title="驳回确认">
        <el-form :model="form">
          <el-form-item label="签约备注">
              <el-input
                v-model="textarea"
                :rows="2"
                type="textarea"
                placeholder="请输入驳回原因"
                resize="none"
              />
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="abc">
             确认
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 返回 -->
      <el-button @click="backtrack">返回</el-button>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
// import { tr } from "element-plus/es/locale";
// export default {
//   name: "Particulars",
// };
const router = useRouter();
const value2 = ref("");
const handleClick = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/redact");
};
const approve = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/approve");
};
// const reject = () => {
//   // console.log('绑定事件成功')
//   router.push('/signing-management/reject')
// }
const backtrack = () => {
  // console.log('绑定事件成功')
  router.push("/signing-management/waite-signing");
};
const open = () => {
  ElMessageBox.confirm("确认要审核通过吗？", "审核确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "审核通过",
      });
      router.push("/signing-management/approve");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "审核未通过",
      });
    });
};
// 驳回对话框
const dialogTableVisible = ref(false)
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  
})
const abc = () => {
  dialogFormVisible = true
  console.log(dialogFormVisible)
  
  router.push("/signing-management/reject");
};
// const dialogFormVisible = () => {
//   // console.log('绑定事件成功')
//   router.push("/signing-management/redact");
// };

</script>
<style lang="less" scoped>
:deep(.el-textarea__inner){ 
  width: 350px;
  height: 150px;
}
// img {
//   width: 15px;
//   height: 30px;
//   position: absolute;
//   margin-left: 0; 
// }
 img{
  // width: 15px;
  height: 30px;
  // margin-top: 20px;
  display: inline-block;
 }
h3 {
  margin-left: 10px;
  display: inline-block;

}
h4 {
  margin-left: 30px;
}
.box1 {
  display: inline-block;
  margin-left: 50px;
  .xinmin {
    margin-right: 30px;
  }
}
.box2 {
  display: inline-block;
  .id {
    margin-right: 30px;
  }
}
.box3 {
  display: inline-block;
  .sex {
    margin-right: 30px;
  }
}
.box4 {
  display: inline-block;
  .age {
    margin-right: 30px;
  }
}
.bttom {
  // margin-top: 40px;
}
.box {
  margin-left: 30px;
}
.family {
  margin-top: 25px;
  margin-left: 30px;
  display: inline-block;
}
.lq {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 110px;
  margin-top: -25px;
}
.wl {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 349px;
  margin-top: -81px;
}
.el-card {
  height: 80px;
  // margin-left: 40px;
  // display: block;
}
.member {
  margin-left: 107px;
  margin-top: -22px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.qy{
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-col{
  margin-top: 20px;
}
.particulars{
  font-size: 14px;
}
</style>